<template>
  <section class="drawboard">
    <section class="drawboard-inner">
      <template v-if="value">
        <div class="drawboard-inner-value" :style="{'background-image': `url(${value})`}">
          <div class="drawboard-inner-remove" @click="value = ''">
            <i class="el-icon-remove-outline" />
          </div>
        </div>
      </template>
      <template v-else>
        <el-popover v-model="visible" placement="bottom-start" width="400" popper-class="drawboard-inner-sign">
          <section class="sign-inner">
            <v-sign ref="esign" class="esignature" :width="400" :height="240" :line-width="line.width" :line-color="line.color" />
          </section>
          <section class="sign-tools">
            <div class="tools-left">
              <div class="left-refresh" @click="handleClear">
                <i class="el-icon-refresh-right" />
              </div>
              <template v-for="item in sizes">
                <div :key="item" class="left-size" :class="{'active': item == line.width}" @click="handleSize(item)">
                  <div :style="{'width': `${item}px`, 'height': `${item}px`}" />
                </div>
              </template>
              <div class="left-color">
                <el-color-picker v-model="line.color" size="mini" @change="handleColorChange" />
              </div>
            </div>
            <div class="tools-right">
              <el-button plain size="mini" @click="handleCancel">取消</el-button>
              <el-button type="primary" size="mini" @click="handleComit">确认</el-button>
            </div>
          </section>
          <div slot="reference" :class="{'drawboard-error': error_}">
            <span class="icon">
              <svg-icon icon-class="drawboard-icon" />
            </span>
            添加签名
          </div>
        </el-popover>
      </template>
    </section>
  </section>
</template>
<script>
import mixins from './../mixins'
import VSign from '@/components/CustomPage/fields/widget/drawboard/sign'
export default {
  name: 'VDrawboard',
  components: { VSign },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      line: {
        width: 2,
        color: '#000000'
      },
      sizes: [2, 4, 6],
      value: '',
      visible: false
    }
  },
  watch: {
    value: {
      handler(v) {
        this.setCheck()
        this.dispatch_event('filed-value-change', v)
      },
      deep: true
    }
  },
  methods: {
    getValue() {
      return this.value
    },

    setValue(v) {
      this.value = v
    },

    setCheck() {
      const { value, required } = this
      let error = false; let errorMsg = ''
      if (required && !value) {
        error = true
        errorMsg = '必填选项不能为空'
      }
      this.error_ = error
      this.error_message_ = errorMsg
      this.fieldCheck()
    },

    handleComit() {
      this.$refs.esign.generate().then(v => {
        this.value = v
        this.visible = false
      }).catch(e => {
        this.$message.info('请先设置签名')
      })
    },

    handleCancel() {
      this.value = ''
      this.visible = false
    },

    handleClear() {
      this.$refs.esign.reset()
      this.value = ''
    },

    handleSize(v) {
      this.line.width = v
    },

    handleColorChange(v) {
      if (v == null) {
        this.line.color = '#000000'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/var.scss';
@import '@/styles/utility/shadow.scss';
.drawboard {
  .drawboard-inner {
    /deep/ {
      .el-popover__reference-wrapper {
        .el-popover__reference {
          height: 36px;
          line-height: 36px;
          background-image: none;
          border-radius: 4px;
          border: 1px solid #dcdfe6;
          background-color: $f7;
          padding: 0 15px;
          cursor: pointer;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: $f2;
          &:hover {
            color: $a1;
          }
        }
        .drawboard-error {
          height: 36px;
          line-height: 36px;
          background-image: none;
          border-radius: 4px;
          border: 1px solid $a3;
          background-color: $f7;
          padding: 0 15px;
          cursor: pointer;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: $f2;
        }
      }
    }

    .drawboard-inner-value {
      position: relative;
      height: 130px;
      background-color: #fff;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
      @include boxShadow(2);
      border-radius: 4px;
      .drawboard-inner-remove {
        position: absolute;
        right: -10px;
        top: -10px;
        visibility: hidden;
        font-size: 18px;
        color: $f9;
        background-color: $f3;
        border-radius: 50%;
        cursor: pointer;
      }
      &:hover {
        @include boxShadow(3);
        .drawboard-inner-remove {
          visibility: visible;
        }
      }
    }
  }
}
</style>
<style lang="scss">
@import '@/styles/var.scss';
@import '@/styles/utility/center.scss';
.drawboard-inner-sign {
  .sign-inner {
    border: 1px solid $f5;
    border-radius: 4px;
  }

  .sign-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
    .tools-left {
      display: flex;
      align-items: center;
      > div {
        width: 28px;
        height: 28px;
        text-align: center;
        @include center();
        border: 1px solid $f6;
        margin-right: 5px;
        cursor: pointer;
      }

      .left-size {
        > div {
          background: $f3;
          border-radius: 50%;
        }
        &.active {
          background: $f6;
        }
      }
    }

    .tools-right {
    }
  }
}
</style>
